<template>
  <div class="app-container user">
    <Tool
      @add="handleAdd"
      @input="handleInput"
      @search="handleSearch"
      @clear="handleClear"
    />
    <PaginationCard
      :total="totalCount"
      :page-size="maxResultCount"
      @sizeChange="handleSizeChange"
      @currentChange="handleCurrentChange"
    >
      <Table
        slot="table"
        :list="list"
        @edit="handleEdit"
        @permissions="handlePermissions"
        @delete="handleDelete"
      />
    </PaginationCard>
    <Dialog
      v-if="dialogVisible"
      ref="userDialog"
      :dialog-type="dialogType"
      :visible="dialogVisible"
      @cancel="handleCancel"
      @success="handleSuccess"
    />
    <permissions-dialog
      v-if="visPermissions"
      ref="permissionsDialog"
      provider-name="U"
      @close="visPermissions = false"
    />
  </div>
</template>

<script>
import { getUsers, addUser, deleteUser, updateUser } from '@/http/modules/user'
import Table from './components/Table'
import Tool from './components/Tool'
import Dialog from './components/Dialog'
import PermissionsDialog from '@/components/PermissionsDialog'
import PaginationCard from '@/components/PaginationCard'
export default {
  components: {
    Tool,
    Table,
    Dialog,
    PermissionsDialog,
    PaginationCard
  },
  data() {
    return {
      list: [],
      filter: '',
      maxResultCount: 10,
      currentPage: 1,
      totalCount: 0,
      dialogVisible: false,
      dialogType: 'add',
      editId: '',
      visPermissions: false
    }
  },
  mounted() {
    const vm = this
    vm.getUsers()
  },
  methods: {
    handleAdd() {
      const vm = this
      vm.dialogType = 'add'
      vm.openDialog()
    },
    handleInput(filter) {
      const vm = this
      vm.filter = filter
    },
    handleSearch() {
      const vm = this
      vm.currentPage = 1
      vm.getUsers()
    },
    handleClear() {
      const vm = this
      vm.filter = ''
      vm.currentPage = 1
      vm.getUsers()
    },
    handleEdit(row) {
      const vm = this
      vm.dialogType = 'edit'
      vm.editId = row.id
      vm.openDialog()
      vm.$nextTick(() => {
        vm.$refs.userDialog.setData(row)
      })
    },
    handlePermissions(row) {
      const vm = this
      vm.visPermissions = true
      vm.$nextTick(() => {
        vm.$refs.permissionsDialog.handleGetPermissions(row)
      })
    },
    handleDelete({ id }) {
      const vm = this
      vm.$confirm('删除该用户, 是否继续?', '提示', {
        confirmButtonText: '是',
        cancelButtonText: '否',
        type: 'warning'
      })
        .then(() => {
          deleteUser(id).then(res => {
            vm.$message.success('删除成功')
            vm.getUsers()
          })
        })
        .catch(() => {})
    },
    handleSizeChange(num) {
      const vm = this
      vm.currentPage = 1
      vm.maxResultCount = num
      vm.getUsers()
    },
    handleCurrentChange(num) {
      const vm = this
      vm.currentPage = num
      vm.getUsers()
    },
    handleCancel() {
      const vm = this
      vm.closeDialog()
    },
    handleSuccess(data) {
      const vm = this
      const isadd = vm.dialogType === 'add'
      const fn = isadd ? addUser(data) : updateUser(vm.editId, data)
      fn.then(res => {
        vm.closeDialog()
        vm.$message.success('保存成功')
        vm.getUsers()
      })
    },
    openDialog() {
      const vm = this
      vm.dialogVisible = true
    },
    closeDialog() {
      const vm = this
      vm.dialogVisible = false
    },
    getUsers() {
      const vm = this
      getUsers(vm.currentPage, vm.maxResultCount, vm.filter).then(res => {
        vm.list = res.items
        vm.totalCount = res.totalCount
      })
    }
  }
}
</script>

<style
  lang="
      scss"
  scoped
></style>
